<template>
	<view class="content">
			<uni-forms ref="form"   :value="user" labelWidth="80px" :border="true">
				<uni-forms-item   name="oldPassword" label="旧密码">
					<uni-easyinput :inputBorder="false" type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
				</uni-forms-item>
				<uni-forms-item   name="newPassword" label="新密码">
					<uni-easyinput  :inputBorder="false" type="password" v-model="user.newPassword" placeholder="请输入新密码" />
				</uni-forms-item>
				<uni-forms-item  name="confirmPassword" label="确认密码">
					<uni-easyinput :inputBorder="false" type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
				</uni-forms-item>
			</uni-forms>
		
			<view class="button-container">
				<button type="primary" class="button" @click="changepw">修改</button>
			</view>
	
	</view>
	
</template>

<script>
import { updatePassword } from "@/api/mine"
	export default {
		data() {
			return {
				user: {
				  oldPassword: undefined,
				  newPassword: undefined,
				  confirmPassword: undefined
				},
				rules: {
				  oldPassword: {
				    rules: [{
				      required: true,
				      errorMessage: '旧密码不能为空'
				    }]
				  },
				  newPassword: {
				    rules: [{
				        required: true,
				        errorMessage: '新密码不能为空',
				      },
				      {
				        minLength: 6,
				        maxLength: 20,
				        errorMessage: '长度在 6 到 20 个字符'
				      }
				    ]
				  },
				  confirmPassword: {
				    rules: [{
				        required: true,
				        errorMessage: '确认密码不能为空'
				      }, {
				        validateFunction: (rule, value, data) => data.newPassword === value,
				        errorMessage: '两次输入的密码不一致'
				      }
				    ]
				  }
				}
			}
		},
		onReady() {
		  this.$refs.form.setRules(this.rules)
		},
    computed: {
      id() {
        return this.$store.state.user.id
      },
    },
		methods: {
			changepw() {
				this.$refs.form.validate().then(res => {
          uni.showLoading({
            title:'更新中..'
          })
		  updatePassword({
            oldPassword: this.user.oldPassword,
            newPassword: this.user.newPassword
          }).then(response => {
            uni.hideLoading()
            uni.showToast({title:'修改成功'})
            uni.navigateBack()
				  }).catch(()=>{
            uni.hideLoading()
          })
				})
			}
		}
	}
</script>

<style scoped>
	.content {
		height: 100%;
		padding-bottom: calc(var(--window-bottom) + 20px);
		padding-top: 36rpx;
		padding: 15px;
		background-color: #ffffff;
	}
	
	.button-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		display: flex;
		justify-content: center;
		align-items: center;
		/* padding: 0 20rpx; */
		margin-bottom: 120rpx;
		height: 50px;
	}

	.button {
		flex: 1;
		margin-right: 10px;
		margin-left: 10px;

		height: 100%;
		text-align: center;
		line-height: 50px;
		font-size: 16px;
		border-radius: 5px;

		color: #fff;


	}
	
</style>